<template>
    <div id="chartDom" class="draw_div"></div>
</template>

<script>
import echarts from "echarts";
import { generate_hex_color } from "@/utils/formatUtil"

export default {
    name: "HistogramAndLineChart",
    props: { },
    data() {
        return { }
    },
    mounted() { },
    methods: {
        defineWeek(x_weeks, y_weeks) {
            // 参数
            var titleList = ['口数', '进尺（万米）']
            var x_coordinate = x_weeks
            var dataList = y_weeks
            var colors = []
            titleList.forEach(item => {
                colors.push(generate_hex_color())
            })
            var myChart = echarts.init(document.getElementById('chartDom'));
            // 绘制图表
            myChart.setOption({
                color: colors,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    right: '20%'
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    data: titleList
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: x_coordinate
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: titleList[0],
                        position: 'left',
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[0]
                            }
                        },
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: titleList[1],
                        position: 'right',
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} 万米'
                        }
                    }
                ],
                series: [
                    {
                        name: titleList[0],
                        type: 'bar',
                        yAxisIndex: 0,
                        data: dataList[0]
                    },
                    {
                        name: titleList[1],
                        type: 'line',
                        yAxisIndex: 1,
                        data: dataList[1]
                    }
                ]
            });
        }
    }
}
</script>

<style scoped>
.draw_div {
    height: 500px;
}
</style>